<template>
    <h2>显式设置</h2>
    <div class="tw:flex tw:flex-row tw:flex-between tw:gap-2">
        <div class="tw:order-3 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">01</div>
        <div class="tw:order-1 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">02</div>
        <div class="tw:order-2 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">03</div>
    </div>
    <h2>首尾</h2>
    <div class="tw:flex tw:flex-row tw:flex-between tw:gap-2">
        <div class="tw:order-last tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">01</div>
        <div class="tw:order-1 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">02</div>
        <div class="tw:order-first tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">03</div>
    </div>
    <h2>负数的顺序号</h2>
    <div class="tw:flex tw:flex-row tw:flex-between tw:gap-2">
        <div class="tw:-order-3 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">01</div>
        <div class="tw:order-1 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">02</div>
        <div class="tw:-order-2 tw:bg-sky-500 tw:size-14 tw:rounded-md tw:flex tw:justify-center tw:items-center tw:text-white tw:font-bold">03</div>
    </div>
</template>